<template>
  <view>
    <!-- 搜索组件 -->
    <view class="search">
      <my-search @click.native="goSearch"></my-search>
    </view>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :scroll-top="scrollTop" :style="{height: wh + 'px'}" @click="swichCate">
        <block v-if="cateList.length > 0">
          <view class="left-scroll-view-item" v-for="(item,index) in cateList" :data-idx="index" :key="item.cat_id" :class="{active:curIdx === index}">{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <!-- 右侧选项卡 -->
        <view class="tab">
          <view class="rigth_tab" @click="swichCateL2" :style="{width: `${catelev2.length * 100}px`}">
           <block v-if="catelev2.length > 0">
             <view class="rigth_tab_item" v-for="(ite,indx) in catelev2" :data-idx2="indx" :class="{active:curIdxL2 === indx}" :key="ite.cat_id">
               {{ite.cat_name}}
             </view>
           </block>
          </view>
        </view>
       <!-- 右侧商品栏 -->
       <view class="content" @click="goodJump">
          <block v-if="catelev3.length > 0">
            <view class="rigth-scroll-view-item" v-for="(it,idx) in catelev3" :key="it.cat_id" :data-id="it.cat_id">
              <image :data-id="it.cat_id" :src="it.cat_icon.replace(/dev/g,'web')" mode=""></image>
              <text :data-id="it.cat_id">{{it.cat_name}}</text>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import {getCateList} from '../../utils/api.js'
  export default {
    data() {
      return {
        wh:0,
        cateList:[],
        curIdx:0,
        curIdxL2:0,
        scrollTop:0,
        left:0
      };
    },
    onLoad(){
       // 获取当前系统的信息
            const sysInfo = uni.getSystemInfoSync()
            // 为 wh 窗口可用高度动态赋值
            this.wh = sysInfo.windowHeight
            
        // 获取分类列表
        this.getCateList()
    },
    computed:{
      catelev2(){
        const i = this.curIdx
        if(this.cateList.length === 0){
          return []
        }
        return this.cateList[i].children
      },
      catelev3() {
        const i = this.curIdxL2
        if(this.catelev2.length === 0){
          return []
        }
        return this.catelev2[i].children
      }
    },
    methods:{
      // 获取分类列表
      async getCateList(){
        try{
          const {data} = await getCateList()
          this.cateList = data.message
        }catch(e){
          //TODO handle the exception
        }
      },
      // 切换cate选项卡
      swichCate(e){
        const idx = e.target.dataset.idx
        if(idx !== undefined) {
          this.scrollTop = this.scrollTop === 0 ?  1 :  0
          this.left = this.left === 0 ? 1 : 0
          this.curIdx = idx
          // 重置二级导航的索引
          this.curIdxL2 = 0
        }
      },
      // 切换二级cate选项卡
      swichCateL2(e){
        const idx = e.target.dataset.idx2
        if(idx !== undefined) {
          this.curIdxL2 = idx
        }
      },
      // 点击商品条跳转
      goodJump(e){
        const id = e.target.dataset.id
        if(id !== undefined) {
          uni.navigateTo({
            url:'/subpkg/goods_list/goods_list?cid=' + id
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search {
    position: sticky;
    top: 0;
    z-index: 9999;
  }
  .scroll-view-container {
    display: flex;
    // 左侧
    .left-scroll-view {
      width: 120px;
  
      .left-scroll-view-item {
        line-height: 60px;
        background-color: #f7f7f7;
        text-align: center;
        font-size: 12px;
  
        // 激活项的样式
        &.active {
          background-color: #ffffff;
          position: relative;
  
          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #c00000;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    // 右侧
    .right-scroll-view {
      flex:1;
      background-color: #ffffff;
      overflow: hidden;
      // 导航
      .tab {
        height: 80rpx;
        overflow-x: auto;
        .rigth_tab {
          height: 100%;
          .rigth_tab_item {
            float: left;
            width: 200rpx;
            height: 100%;
            line-height: 60rpx;
            text-align: center;
            &.active {
              background-color: #c00000;
              color: white;
            }
          }
        }
      }
      // 商品列表
      .content {
        display: flex;
        flex-wrap: wrap;
        .rigth-scroll-view-item {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 15px;
          image {
            width: 60px;
            height: 60px;
          }
          text {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
